<template>
  <div class='drawPuper'>
  <a-modal
    closable
    title='明细'
    placement='right'
    width='100%'
    :visible='visible'
    @cancel='close'
    @ok="close"
  >
    <a-card :bordered='false' style='overflow-y: scroll;height:calc(100vh - 55px - 73px)'>
      <a-row :gutter='24'>
        <a-form :form='form'>
<!--          <a-col :md='12' :sm='24'>-->
<!--            <a-form-item-->
<!--              :labelCol='labelCol'-->
<!--              :wrapperCol='wrapperCol'-->
<!--              label='活动细类'>-->
<!--              <a-input-search placeholder='请选择活动细类' v-model='queryParam.categoriesDetailCode'-->
<!--                              readOnly enter-button @search="custSearchPro2('actDetail')" />-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md='12' :sm='24'>-->
<!--            <a-form-item-->
<!--              :labelCol='labelCol'-->
<!--              :wrapperCol='wrapperCol'-->
<!--              label='终端名称'>-->
<!--              <a-input placeholder='请输入终端名称' @change='terminalNameCH' v-model='queryParam.terminalName'></a-input>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md='14' :sm='24'>-->
<!--            <a-form-item-->
<!--              :labelCol='{xs:5,xm:24}'-->
<!--              :wrapperCol='{xs:19,xm:24}'-->
<!--              label='有效期'-->
<!--              >-->
<!--              <div style='display: flex;'>-->
<!--                <a-date-picker  @change='terminalNameCH' format='YYYY-MM-DD' showTime valueFormat='YYYY-MM-DD'-->
<!--                                v-model='queryParam.executeStartDate'-->
<!--                                placeholder='点击选择开始时间' />-->
<!--                <div>~</div>-->
<!--                <a-date-picker  @change='terminalNameCH' style='width: 30%' format='YYYY-MM-DD' showTime valueFormat='YYYY-MM-DD'-->
<!--                                v-model='queryParam.executeEndDate'-->
<!--                                placeholder='点击选择结束时间' />-->
<!--              </div>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md='12' :sm='24'>-->
<!--            <a-form-item-->
<!--              :labelCol='labelCol'-->
<!--              :wrapperCol='wrapperCol'-->
<!--              label='审核状态'>-->
<!--              <a-select  @change='terminalNameCH' v-model='queryParam.bpmStatus'>-->
<!--                <a-select-option value='2'>待审核</a-select-option>-->
<!--                <a-select-option value='3'>合格</a-select-option>-->
<!--                <a-select-option value='4'>不合格</a-select-option>-->
<!--              </a-select>-->
<!--            </a-form-item>-->
<!--          </a-col>-->
<!--          <a-col :md='8' :sm='24' style='float: right'>-->
<!--            <div class='button' style='float: right'>-->
<!--              <a-button type='primary' @click='searchQuery' icon='search'>查询</a-button>-->
<!--              <a-button type='primary' @click='searchReset' icon='reload' style='margin-left: 8px'>重置</a-button>-->
<!--            </div>-->
<!--          </a-col>-->
          <a-col :md='24' :sm='24'>
            <a-table
              ref='table'
              bordered
              size='middle'
              :rowKey='(record,index) =>{return record.id + record.exampleCode+ record.categoriesDetailCode}'
              :columns='columns'
              :dataSource='dataSource'
              :pagination='false'
              :scroll='{ x: 900,y:600 }'
              :loading='loading'
              @change='handleTableChange'>
              <template slot='urlPath' slot-scope='t,r,index'>
                <viewer :images="images" v-if='t'>
                <img style='width: 25px;height: 25px' :src='t' />
                </viewer>
                <a v-if='!t'>暂无照片</a>
              </template>
              <template slot='fileVoList' slot-scope='t,r,index'>
                <viewer :images="images">
                  <a @click="tableEdit(r)" style="position: relative">
                    查看
                    <img v-for="(img, index) in images" :src="img" :key="index" class="tableImages">
                  </a>
                </viewer>
              </template>

            </a-table>
          </a-col>
        </a-form>
        <proChose ref='prochoose' v-bind='modalProps' @okbro='okbropro'></proChose>
      </a-row>
    </a-card>
  </a-modal>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css'
import proChose from '@comp/cn-components/ProChose'
import JSelectCategoriesDetail from '@/components/cn-select-popup/JSelectCategoriesDetail'
import moment from 'moment'
import '@/assets/less/TableExpand.less'
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, httpAction, postAction } from '@/api/manage'
import ARow from 'ant-design-vue/es/grid/Row'
import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'

export default {
  name: 'feeApplyDetail',
  mixins: [PageListMixin],
  components: {
    ARangePicker,
    ARow,
    JSelectCategoriesDetail,
    proChose
  },
  data() {
    return {
      images : ['https://pt.chaona.top/upload/img/20211008/202110081712054784c8233e8741f1abe363d1c4a53b96.jpg'],
      temp: {},
      queryParam: {},
      proName: '',
      form: this.$form.createForm(this),
      title: '',
      visible: false,
      disableMixinCreated: true,
      model: {},
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      superQueryParams: '',
      searchConfig: [
        {
          // label:'订单编号',
          type: 'input',
          name: 'exampleCode',
          placeholder: '请输入示例编码'
        }, {
          // label:'业务员',
          type: 'input',
          name: 'exampleName',
          placeholder: '请输入示例名称'
        }, {
          // label:'订单状态',
          type: 'a-select',
          name: 'exampleType',
          option: [
            {
              name: '采集要求',
              value: '1'
            },
            {
              name: '核销要求',
              value: '2'
            }
          ],
          placeholder: '请选择类型'
        }, {
          type: 'a-select',
          name: 'status',
          option: [{
            name: '启用',
            value: '009'
          }, {
            name: '停用',
            value: '003'
          }],
          placeholder: '请选择状态'
        }
      ],

      qyeryParams: {
        date: []
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      url: {
        list: window._CONFIG['domianTpmURL'] + '/oaActivity/getInfo'

      }
    }
  },
  created() {
    this.columns = [
      {
        title: '终端编码',
        align: 'center',
        width:140,
        dataIndex: 'terminalCode',
        customRender: (text, row, index) => {
          const obj = {
            children: text,
            attrs: {}
          }
          obj.attrs.rowSpan = this.conutfun('terminalCode')[index]
          return obj
        }
      },
      {
        title: '终端名称',
        align: 'center',
        dataIndex: 'terminalName',
        width:110,
        customRender: (text, row, index) => {
          if (text != '') {
            const obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.rowSpan = this.conutfun('terminalCode')[index]
            return obj
          }
        }
      },
      {
        title: '执行时间',
        align: 'center',
        dataIndex: 'createDate',
        width:180,
        customRender: (text, row, index) => {
          if (text != '') {
            const obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.rowSpan = this.conutfun('createDate')[index]
            return obj
          }
        }
      },
      {
        title: '提交人',
        align: 'center',
        dataIndex: 'createName',
        width:110,
        customRender: (text, row, index) => {
          if (text != '') {
            const obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.rowSpan = this.conutfun('createName')[index]
            return obj
          }
        }
      },
      {
        title: '定位信息',
        align: 'center',
        dataIndex: 'address',
        width: 130,
        customRender: (text, row, index) => {
          if (text != '') {
            const obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.rowSpan = this.conutfun('address')[index]
            return obj
          }
        }
      },
      {
        title: '活动细类',
        align: 'center',
        width:110,
        dataIndex: 'categoriesDetailName',
        customRender: (text, row, index) => {
          if (text != '') {
            const obj = {
              children: text,
              attrs: {}
            }
            obj.attrs.rowSpan = this.conutfun('categoriesDetailCode')[index]
            return obj
          }
        }
      },
      {
        title: '示例名称',
        align: 'center',
        width:110,
        dataIndex: 'exampleName',
        scopedSlots: { customRender: 'exampleName' }
      },
      {
        title: '示例照片',
        align: 'center',
        width:110,
        dataIndex: 'urlPath',
        scopedSlots: { customRender: 'urlPath' }
        // customRender: (r) => {
        //   return '5'
        // }
      },
      {
        title: '执行照片',
        align: 'center',
        width:110,
        dataIndex: 'fileVoList',
        scopedSlots: { customRender: 'fileVoList' },
        // customRender: (r) => {
        //   return '5'
        // }
      },
      {
        title: 'ai识别结果',
        align: 'center',
        width:110,
        dataIndex: 'qualifiedFlagStr;',
        // customRender: (r) => {
        //   return '5'
        // }
      },
      {
        title: '扣除分数',
        align: 'center',
        width:80,
        dataIndex: 'deductScore',
        // customRender: (text, row, index) => {
        //   if (text != '') {
        //     const obj = {
        //       children: text,
        //       attrs: {}
        //     }
        //     // obj.attrs.rowSpan = this.mergeCells(row.deductScore, this.dataSource, 'deductScore')
        //     return obj
        //   }
        // }
      },
      {
        title: '审核意见',
        align: 'center',
        width:110,
        dataIndex: 'reviewComments',
        customRender: (text, row, index) => {
          const obj = {
            children: text,
            attrs: {}
          }
          // obj.attrs.rowSpan = this.mergeCells(row.reviewComments, this.dataSource, 'reviewComments')
          return obj
        }

      },
      {
        title: '审核状态',
        align: 'center',
        width:80,
        dataIndex: 'bpmStatusStr',
        customRender: (text, row, index) => {
          if (text != '') {
            const obj = {
              children: text,
              attrs: {}
            }
            // obj.attrs.rowSpan = this.mergeCells(row.bpmStatus, this.dataSource, 'bpmStatus')
            return obj
          }
        }
      }
    ]

    this.images = []
  },
  methods: {
    terminalNameCH(){
      this.temp = {}
    },
    tableEdit(r) {
      console.log(r)
      this.images = []
      this.images = r.executeDetailInfos.map( item =>{
        return item.fileUrl
      })
      console.log(this.images)
    },
    mergeCells(text, array, columns,key) {
      if (!array || array.length == 0) {
        return
      }
      let i = 0
      if (text !== this.temp[columns]) {
        this.temp[columns] = text
        array.forEach((item) => {
          if (item[key] === this.temp[columns]) {
            i += 1
          }
        })
      }
      console.log(columns + ':' + i)
      return i
    },
    okbropro(e1, e2) {
      this.temp = {}
      this.$set(this.queryParam, 'categoriesDetailCode', e1[0].categoriesDetailCode)
      console.log(this.queryParam)
    },
    custSearchPro2(status, status2) {
      this.$refs.prochoose.rowKey = 'id'
      this.$refs.prochoose.isorter.templateCode = this.model.templateCode
      this.$refs.prochoose.isorter.ways = 'post'
      let formconfig = [
        {
          key: 'categoriesDetailName',
          label: '细类名称'
        },
        {
          key: 'categoriesDetailCode',
          label: '细类编码'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '细类编码',
            align: 'center',
            dataIndex: 'categoriesDetailCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '细类名称',
            align: 'center',
            dataIndex: 'categoriesDetailName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianTpmURL'] + '/act/categories/findPageList',
        multiple: false,
        columW: 11
      }
      this.proName = '活动细类'
      this.$refs.prochoose.edit(formconfig, tableconfig, status, 'status2')
    },

    conutfun(dataIndex) {
      const dataSource1 =this.dataSource
      var myArray = new Array(dataSource1.length) // 聲明一個數組，每個對應保存的是rowspan的值
      console.log(dataSource1)
      var mykeyname = '' // 保存上一個值
      var count = 0 // 保存相同的值出現的次數
      var startindex = 0 // 保存第一次這個值出現的位置
      for (var i = 0; i < dataSource1.length; i++) {
        var val = dataSource1[i][dataIndex]
        if (i === 0) {
          mykeyname = val
          count = 1
          myArray[0] = 1
        } else {
          if (val === mykeyname) {
            count++
            myArray[startindex] = count
            myArray[i] = 0
          } else {
            count = 1
            mykeyname = val
            startindex = i
            myArray[i] = 1
          }
        }
      }
      return myArray
    },
    countArrFun() {
      var mynewarray = {}
      for (var i = 0; i < this.columns.length; i++) {
        const _ = this.columns[i]
        const arr = this.conutfun(_.dataIndex)
        mynewarray[_.dataIndex] = arr
      }
      console.log(mynewarray)
      return mynewarray
    },
    searchReset() {
      let queryParam = {
        actCode: this.queryParam.actCode,
        templateCode: this.queryParam.templateCode
      }
      this.queryParam = queryParam
      this.loadData(1)
    },
    loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1
      }
      var params = this.getQueryParams()//查询条件
      this.loading = true
      var that = this
      postAction(this.url.list, params).then((res) => {
        if (res.success) {
          this.temp = {}
          that.dataSource = res.result
          that.dataSource.forEach(item =>{
            item.startKeys = item.createDate +' '+ item.createDateTime
          })
          that.loading = false
        }
      })
    },

    add() {
      this.edit({})
    },
    edit(record) {
      this.temp = {}
      this.queryParam = {}
      this.dataSource = []
      this.model = Object.assign({}, record)
      this.queryParam.actCode = record.actCode
      this.queryParam.templateCode = record.templateCode
      this.loadData()
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys[0] = selectedRowKeys
    },
    downExportXls(key) {
      const downurl = window._CONFIG['domianURL'] + '/cnDownloadController/saveOrUpdate'
      if (!key || typeof key != 'string') {
        this.$message.warning('未配置接口标记！')
        return
      }
      let param = {
        accountCode: this.queryParam.accountCode,
        companyCode: this.queryParam.companyCode,
        accountType: this.queryParam.accountType,
        yearBalance: this.queryParam.yearBalance,
        startDate: this.queryParam.startDate,
        endDate: this.queryParam.endDate,
        type: this.queryParam.type
      }
      console.log(param)
      let expParams = JSON.stringify(param)
      // expParams = escape(expParams)
      console.log(Base64.encode(expParams))
      postAction(downurl, { impKey: key, expParams: Base64.encode(expParams) }).then((res) => {
        if (res.success) {
          this.$message.info(res.message + ',等待下载完成！')
        } else {
          this.$message.warn(res.message)
        }
      })
    },

    handleOk() {
      let data
      const that = this
      that.$emit('ok', this.selectedRowKeys, this.selectionRows[0])
      that.confirmLoading = false
      that.close()
    },
    handleCancel() {
      this.close()
    },

    dateRangeChange(date) {
      if (!date) {
        this.queryParam.startDate = ''
        this.queryParam.endDate = ''
        return
      }
      this.queryParam.startDate = date[0]
      this.queryParam.endDate = date[1]
    }
  },
  computed: {
    modalProps() {
      return Object.assign({}, {
        name: this.proName
      })
    }
  },

}
</script>

<style scoped>
.drawPuper{
  min-width:500px;

  over-flow:scroll;
}
.btn {
  z-index: 9999;
  background-color: #FFFFFF;
  position: absolute;
  bottom: 0;
  width: 96%;
  border-top: 1px solid #e8e8e8;
  padding: 20px 0;
  text-align: right;
}

.flex {
  display: flex;

}

.wrap {
  flex-wrap: wrap;
}

.items {
  display: flex;
  align-items: center;
  width: 50%;
  flex-shrink: 0;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.items-text {
  width: 60px;
  margin-right: 10px;
  text-align: right;
}

.button {
  width: 200px;
  flex-shrink: 0;
}
.tableImages {
  width: 100%;
  opacity: 0;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  height: 100%;
}
</style>